<template>
  <view class="container screen-width">
    <view class="company-info">
      <view class="title">主图</view>
      <!-- 轮播图 -->
      <view class="banner-content flex flex-wrap space-between">
        <view class="banner-photo" v-for="(item,index) in carouselMap" :key="index">
          <img :src="getImageUrl(item)" />
          <view v-if="companyInfo.whetherAdministrator === 1" class="del">
            <icon type="clear" size="16" @tap="delBannerImage(index)" />
          </view>
        </view>
        <view
          v-if="companyInfo.whetherAdministrator === 1"
          class="banner-photo"
          style="line-height: 100px"
          @tap="uploadFile1"
        >+</view>
      </view>
      <view class="title">公司信息</view>
      <!-- 公司描述 -->
      <view class="company-describe">
        <view class="flex items-middle">
          <view class="company-logo" v-if="!companyInfo.companyLogo" @tap="uploadFile(2)">+</view>
          <view class="logo" v-else>
            <img :src="getImageUrl(companyInfo.companyLogo)" />
            <view v-if="companyInfo.whetherAdministrator === 1" class="del-logo">
              <icon type="clear" size="16" @tap="delLogoImage(0)" />
            </view>
          </view>
          <view class="tips">
            <view class="name">{{ companyInfo.companyName }}</view>
            <cover-view class="describe">
              <input placeholder="补充描述（选填20个字符）" maxlength="20" v-model="companyInfo.slogan" />
            </cover-view>
          </view>
        </view>
        <cover-view class="pro-info">
          <textarea
            @input="remarkInput"
            maxlength="500"
            placeholder="请输入公司简介（最多500个字符）"
            v-model="companyInfo.synopsis"
          ></textarea>
        </cover-view>
      </view>
      <!-- 管理企业联系人 -->
      <view class="person-content flex flex-col items-middle" v-if="companyInfo.claimInfo.id">
        <view class="list">
          <view class="flex item items-middle">
            <view class="name">{{ companyInfo.claimInfo.name || '--' }}</view>
            <view class="post">{{ companyInfo.claimInfo.position || '--' }}</view>
          </view>
          <view class="flex item items-middle">
            <img src="../../static/company/phone_icon.png" />
            <view class="lable">电话</view>
            <view class="lable-content">{{ companyInfo.claimInfo.phoneNumber || '--' }}</view>
          </view>
          <view class="flex item items-middle">
            <img src="../../static/company/email_icon.png" />
            <view class="lable">邮件</view>
            <view class="lable-content">{{ companyInfo.claimInfo.email || '--' }}</view>
          </view>
          <view class="flex item items-middle">
            <img src="../../static/company/address_icon.png" />
            <view class="lable">地址</view>
            <view class="lable-content">{{ companyInfo.claimInfo.companyAddress || '--' }}</view>
          </view>
        </view>
        <view class="person-btn" @click="toPersonList">管理企业联系人</view>
      </view>
      <view class="create-card" v-else>
        <view
          class="create-btn"
          v-if="companyInfo.whetherAdministrator === 1"
          @click="toCreateCard"
        >添加名片</view>
      </view>

      <view class="title">核心产品</view>
      <!-- 核心产品 -->
      <view class="product-content">
        <view class="pro-list" v-for="(item,index) in companyInfo.coreProducts" :key="index">
          <img :src="getImageUrl(item.image)" />
          <view v-if="companyInfo.whetherAdministrator === 1" class="del-pro">
            <icon type="clear" size="16" @tap="delProImage(index)" />
          </view>
          <view class="pro-name">
            <input placeholder="请输入产品名称" v-model="item.name" />
          </view>
        </view>
        <view
          class="pro-list"
          v-if="companyInfo.coreProducts.length<5 && companyInfo.whetherAdministrator === 1"
        >
          <view class="pro-photo" @tap="uploadFile(3)">+</view>
          <view class="pro-name">
            <input placeholder="请输入产品名称" />
          </view>
        </view>
      </view>
    </view>
    <view class="top-btn" @click="saveCard" v-if="companyInfo.whetherAdministrator === 1">保存企业信息</view>
    <Festival></Festival>
  </view>
</template>
<script>
import { userInfo } from "../../util/api/user";
import {
  updateCompanyBusinessCardInfo,
  getCompanyBusinessCardInfo,
  addCompanyBusinessCard
} from "../../util/api/company";
import { getImage } from "@/util/getImage.js";
export default {
  data() {
    return {
      companyId: "",
      companyInfo: {
        claimInfo: {
          id: ""
        },
        carouselMap: [],
        coreProducts: [],
        companyLogo: ""
      }, //企业详情
      type: "", //上传图片类型
      userInfo: {},
      carouselMap: []
    };
  },
  onLoad(e) {
    console.log(e);
    this.companyId = e.companyId;
  },
  onShow() {
    // if(this.companyId){
    //     this.getCompanyDetail()
    // }
  },
  mounted() {
    this.getCompanyDetail();
    this.getUserInfo();
  },
  onUnload() {
    uni.$off("editCard");
  },
  methods: {
    getImageUrl(url) {
      return getImage(url);
    },
    // 查看是否有个人名片
    async getUserInfo() {
      const data = await userInfo();
      this.userInfo = data.result;
    },
    // 去创建个人名片页面
    toCreateCard() {
      uni.$on("editCard", () => {
        this.getCompanyDetail();
      });
      if (this.userInfo.whetherExistBusinessCard) {
        uni.navigateTo({
          url: "/pages/person/CardList"
        });
      } else {
        uni.navigateTo({
          url:
            "/pages/person/editCard?isEdit=" +
            0 +
            "&name=" +
            this.companyInfo.companyName +
            "&id=" +
            this.companyInfo.companyId
        });
      }
    },
    // 获取企业名片详情
    async getCompanyDetail() {
      const data = await getCompanyBusinessCardInfo({
        companyId: this.companyId
      });
      this.companyInfo = data.result;
      this.carouselMap = data.result.carouselMap;
    },
    // 保存企业修改
    saveCard() {
      let params = {
        carouselMap: JSON.stringify(this.carouselMap),
        companyId: this.companyInfo.companyId,
        companyLogo: this.companyInfo.companyLogo,
        coreProducts: JSON.stringify(this.companyInfo.coreProducts),
        slogan: this.companyInfo.slogan,
        synopsis: this.companyInfo.synopsis,
        id: this.companyInfo.id
      };
      if (this.companyInfo.businessCardStatus === 1) {
        updateCompanyBusinessCardInfo(params).then(res => {
          if (res.code === 200) {
            uni.showToast({
              title: "修改成功",
              duration: 2000,
              icon: "none"
            });
            setTimeout(() => {
              uni.navigateBack({
                url: "/pages/companyWeb/Index"
              });
            }, 1000);
          }
        });
      } else {
        this.$delete(params, "id");
        addCompanyBusinessCard(params).then(res => {
          if (res.code === 200) {
            uni.showToast({
              title: "修改成功",
              duration: 2000,
              icon: "none"
            });
            setTimeout(() => {
              uni.navigateBack({
                url: "/pages/companyWeb/Index"
              });
            }, 1000);
          }
        });
      }
    },
    remarkInput(event) {
      let length = event.target.value.length;
      console.log(length);
      if (length === 500) {
        uni.showToast({
          title: "最多只能输入500字符",
          icon: "none"
        });
      }
    },
    // 企业管理人列表
    toPersonList() {
      uni.$on("editCard", () => {
        this.getCompanyDetail();
      });
      uni.navigateTo({
        url: `./PersonList?companyId=${this.companyInfo.companyId}&isShow=${this.companyInfo.whetherAdministrator}`
      });
    },
    // 删除产品
    delProImage(index) {
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确认删除此图片",
        cancelText: "考虑一下",
        success(res) {
          if (res.confirm) {
            _this.companyInfo.coreProducts.splice(index, 1);
          }
        }
      });
    },
    // 删除logo
    delLogoImage(index) {
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确认删除此图片",
        cancelText: "考虑一下",
        success(res) {
          if (res.confirm) {
            _this.companyInfo.companyLogo = "";
          }
        }
      });
    },
    // 删除Banner图片
    delBannerImage(index) {
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确认删除此图片",
        cancelText: "考虑一下",
        success(res) {
          if (res.confirm) {
            _this.carouselMap.splice(index, 1);
          }
        }
      });
    },
    uploadFile1() {
      let _this = this;
      uni.chooseImage({
        count: 9,
        success: chooseImageRes => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          this.fileList = tempFilePaths;
          tempFilePaths.forEach(element => {
            console.log("11111", element);
            uni.uploadFile({
              url: "https://bootapi.51bmj.cn/bmj-api/api/home/upload", //仅为示例，非真实的接口地址
              filePath: tempFilePaths[0],
              name: "file",
              success: res => {
                let { data } = res;
                try {
                  data = JSON.parse(data);
                  _this.carouselMap.push(data.result);
                  if (_this.carouselMap.length >= 10) {
                    uni.showToast({
                      title: "宣传公司图片最多存放9张或以下",
                      duration: 2000,
                      icon: "none"
                    });
                    _this.carouselMap = _this.carouselMap.slice(0, 9);
                  }
                } catch (error) {
                  console.log(error);
                }
              }
            });
          });
        }
      });
    },
    // 上传Banner图片
    uploadFile(type) {
      this.type = type;
      let _this = this;
      uni.chooseImage({
        count: 9,
        success: chooseImageRes => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          this.fileList = tempFilePaths;
          tempFilePaths.forEach(element => {
            console.log(element);
            uni.uploadFile({
              url: "https://bootapi.51bmj.cn/bmj-api/api/home/upload", //仅为示例，非真实的接口地址
              filePath: element,
              name: "file",
              success: res => {
                let { data } = res;
                if (_this.type === 3) {
                  try {
                    data = JSON.parse(data);
                    let params = {
                      image: data.result,
                      name: ""
                    };
                    _this.companyInfo.coreProducts.push(params);
                  } catch (error) {
                    console.log(error);
                  }
                } else {
                  try {
                    data = JSON.parse(data);
                    _this.companyInfo.companyLogo = data.result;
                  } catch (error) {
                    console.log(error);
                  }
                }
              }
            });
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  .top-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 13px 0;
    box-sizing: border-box;
    text-align: center;
    background: #1678ff;
    color: white;
    font-size: 16px;
    max-width: 750px;
    z-index: 999;
  }
  .company-info {
    width: 100%;
    background: #dee4f0;
    padding: 15px 15px 55px 15px;
    box-sizing: border-box;
    .title {
      font-size: 20px;
      font-weight: 700;
      color: #333333;
      margin-bottom: 15px;
    }
    .banner-content {
      width: 100%;
      .banner-photo {
        width: 48%;
        height: 100px;
        background: #ffffff;
        font-size: 24px;
        color: #1678ff;
        font-weight: 500;
        // line-height: 100px;
        text-align: center;
        margin-bottom: 10px;
        position: relative;
        img {
          width: 100%;
          height: 100px;
        }
        .del {
          color: #fff;
          width: 16px;
          height: 16px;
          position: absolute;
          right: 0;
          top: -5px;
          border-radius: 50%;
          font-size: 16px;
        }
      }
    }
    .company-describe {
      width: 100%;
      margin-bottom: 10px;
      .company-logo {
        width: 80px;
        height: 80px;
        background: #ffffff;
        line-height: 80px;
        font-size: 24px;
        text-align: center;
        color: #1678ff;
        margin-right: 15px;
      }
      .logo {
        width: 80px;
        height: 80px;
        margin-right: 15px;
        position: relative;
        img {
          width: 80px;
          height: 80px;
        }
        .del-logo {
          color: #fff;
          width: 16px;
          height: 16px;
          position: absolute;
          right: 0;
          top: -5px;
          border-radius: 50%;
          font-size: 16px;
        }
      }
      .tips {
        width: 90%;
      }
      .name {
        font-size: 18px;
        font-weight: 700;
        color: #333333;
        width: 100%;
        border-bottom: 1px solid #c6ccd8;
        padding-bottom: 10px;
      }
      .describe {
        font-size: 14px;
        width: 100%;
        border-bottom: 1px solid #c6ccd8;
        padding: 10px 0;
      }
      .pro-info {
        font-size: 14px;
        padding: 10px 0;
        border-bottom: 1px solid #c6ccd8;
      }
    }
    .person-content {
      width: 100%;
      margin-top: 15px;
      .list {
        width: 100%;
        background: #ffffff;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0px 1px 7px 0px rgba(132, 202, 187, 0.3);
        border-radius: 5px;
        .item {
          margin-bottom: 10px;
          .name {
            font-size: 18px;
            font-weight: 700;
            color: #333333;
            margin-right: 10px;
          }
          .post {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
          }
          img {
            width: 16px;
            height: 16px;
          }
          .lable {
            font-size: 16px;
            font-weight: 400;
            color: #999999;
            margin: 0 10px;
          }
          .lable-content {
            font-size: 16px;
            font-weight: 400;
            color: #333333;
          }
        }
      }
      .person-btn {
        width: 45%;
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-size: 16px;
        background: #1678ff;
        color: #ffffff;
        margin: 20px 0 30px 0;
      }
    }
    .create-card {
      width: 100%;
      height: 300upx;
      background: #dee4f0;
      display: flex;
      align-items: center;
      justify-content: center;
      .create-btn {
        background: #1678ff;
        color: #ffffff;
        padding: 10px 30px;
      }
    }
    .product-content {
      width: 100%;
      .pro-list {
        margin-bottom: 10px;
        position: relative;
        img {
          width: 100%;
          height: 160px;
        }
        .pro-photo {
          width: 100%;
          height: 160px;
          line-height: 160px;
          background: #ffffff;
          font-size: 24px;
          text-align: center;
          color: #1678ff;
        }
        .pro-name {
          width: 100%;
          border-bottom: 1px solid #c6ccd8;
          padding: 10px;
          font-size: 16px;
          text-align: center;
        }
        .del-pro {
          color: #fff;
          width: 16px;
          height: 16px;
          position: absolute;
          right: 0;
          top: -5px;
          border-radius: 50%;
          font-size: 16px;
        }
      }
    }
  }
}
</style>